<template>
  <view>
    <u-navbar title="病情自检" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#222" back-icon-color="#222">
      <!--   <view class="" slot="right" style="font-size: 28rpx; padding-right: 28rpx">所有记录</view> -->
    </u-navbar>
    <!-- 单选题 -->
    <view class="" v-for="(i, k) in feed" :key="k">
      <view class="" style="background: #fff; margin-top: 2rpx; padding-bottom: 25rpx" v-if="i.style == 0">
        <view class="" style="font-size: 28rpx; padding: 23rpx 29rpx">{{ k + 1 }}、 {{ i.problem_name }} 单选题({{ i.score }}分)</view>
        <view class="" style="padding: 0 70rpx">
          <view class="" v-for="(m, n) in i.children" :key="n" @tap="setdx(k, m)">
            <radio :checked="i.check == m" color="#048CFF" style="transform: scale(0.7)"></radio>
            <text>{{ m.answer }}</text>
          </view>
        </view>
      </view>
      <!-- 多选题 -->
      <view class="" style="background: #fff; margin-top: 18rpx; padding-bottom: 25rpx" v-if="i.style == 1 && i.check">
        <view class="" style="font-size: 28rpx; padding: 23rpx 29rpx">{{ k + 1 }}、 {{ i.problem_name }} 多选题({{ i.score }}分）</view>
        <view class="" style="padding: 0 70rpx">
          <view class="" v-for="(m, n) in i.children" :key="n">
            <!-- <radio :checked="getisok(i.check, m)" color="#048CFF" style="transform: scale(.7);"
							@tap="change(i.check, m)"></radio><text>{{m.answer}}</text> -->
            <radio :checked="getisok(k, m)" color="#048CFF" style="transform: scale(0.7)" @tap="change(k, m)"></radio>
            <text>{{ m.answer }}</text>
          </view>
        </view>
        <!-- <view v-if="item.style == 1 && i.check" class="flex align-center flex-wrap" style="margin-top: 34rpx;border-bottom: solid 1rpx #E8E8E8;padding-bottom: 9rpx;">
					<view @click="change(i.check, item1)" class="margin-bottom flex align-center" style="width: 50%;" v-for="(item1,index1) in i.children" :key="index1">
						<checkbox :checked="getisok(i.check, item1)" style="transform: scale(.6);"></checkbox>
						<view class="" style="padding-left: 13rpx;">
							{{item1}}
						</view>
					</view>
				</view> -->
      </view>

      <!-- 问答题 -->
      <view class="" style="background: #fff; margin-top: 18rpx; padding-bottom: 25rpx" v-if="i.style == 2">
        <view class="" style="font-size: 28rpx; padding: 23rpx 29rpx">{{ k + 1 }}、 {{ i.problem_name }}</view>
        <view class="" style="margin: 0 28rpx; background: #f8f8f8; border-radius: 20rpx">
          <view class="" style="padding-left: 29rpx; padding-top: 20rpx">
            <u-input v-model="i.check" :type="type" :border="false" :height="height" :auto-height="autoHeight" placeholder="请根据问题描述您的具体情况" />
          </view>
        </view>
      </view>
    </view>

    <!-- 上传图片 -->
    <view class="" style="background: #fff; margin-top: 18rpx; padding-bottom: 25rpx">
      <view class="" style="padding: 29rpx 0 21rpx 47rpx; font-size: 28rpx">上传照片</view>

      <view class="" style="margin: 0rpx 45rpx">
        <u-upload :action="action" :file-list="fileList" @on-uploaded="onUploaded" max-count="3" :form-data="formData"></u-upload>
      </view>
    </view>
    <!-- 用户描述 -->
    <view class="" style="background: #fff; margin-top: 18rpx; padding-bottom: 25rpx">
      <view class="" style="font-size: 28rpx; padding: 23rpx 29rpx">用户描述</view>
      <view class="" style="margin: 0 28rpx; background: #f8f8f8; border-radius: 20rpx">
        <view class="" style="padding-left: 29rpx; padding-top: 20rpx">
          <u-input v-model="value" :type="type" :border="false" :height="height" :auto-height="autoHeight" placeholder="请输入" />
        </view>
      </view>
    </view>
    <view class="btn" @tap="sub">提交</view>
    <view class="" style="height: 10rpx"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      background: {
        background: '#FFFFFF'
      },
      list: [
        {
          name: '不太好',
          disabled: false
        },
        {
          name: '一般',
          disabled: false
        },
        {
          name: '很好',
          disabled: false
        }
      ],
      // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
      value: '不太好',
      list1: [
        {
          name: '不太好',
          checked: false,
          disabled: false
        },
        {
          name: '一般',
          checked: false,
          disabled: false
        },
        {
          name: '很好',
          checked: false,
          disabled: false
        }
      ],
      value: '',
      type: 'textarea',
      height: 216,
      autoHeight: true,
      action: 'https://wenzhen.jiangkukeji360.com/api/common/upload',
      fileList: [],
      formData: {
        token: uni.getStorageSync('user_info').token
      },
      imgbox: [],
      feed: [],
      radio: 1,
      rSelect: []
    };
  },
  methods: {
    sub() {
      let subject = JSON.stringify(this.feed);
      this.api({
        url: '/api//healthy/addCheck',
        method: 'post',
        data: {
          problem: this.value,
          images: this.imgbox.join(','),
          subject: subject
        }
      }).then((res) => {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        });
        uni.navigateBack();
      });
    },
    getisok(e, v) {
      return e.indexOf(v) != -1;
    },
    setdx(e, v) {
      this.feed[e].check = v;
      this.$forceUpdate();
    },
    dan(m, n) {
      if (this.feed[m].children[n].check == 0) {
        console.log('进来');
        this.feed[m].children[n].check = this.radio;
      } else {
        console.log('进来2');
        this.feed[m].children[n].check = 0;
      }
      console.log(this.feed);
    },
    // 选中某个单选框时，由radio时触发
    radioChange(e) {
      // console.log(e);
    },
    // 选中任一radio时，由radio-group触发
    radioGroupChange(e) {
      // console.log(e);
    },
    // 选中某个复选框时，由checkbox时触发
    checkboxChange(e) {
      //console.log(e);
    },
    // 选中任一checkbox时，由checkbox-group触发
    checkboxGroupChange(e) {
      // console.log(e);
    },
    onUploaded(res) {
      console.log(res, '什么');
      let imgs = [];
      res.map((i) => {
        imgs.push(i.response.data.url);
      });
      this.imgbox = [...new Set(imgs)];
      console.log('上传的图片', imgs);
    },
    user() {
      this.api({
        url: 'api//healthy/getSubject',
        method: 'post'
      }).then((res) => {
        this.feed = res.data;
        for (let i = 0; i < this.feed.length; i++) {
          // if(this.feed[i].style == 0){
          // 	this.feed[i].children.map((m,n)=>{
          // 		m.check = 0
          // 	})

          // }
          if (this.feed[i].style == 1) {
            this.feed[i].check = [];
          } else {
            this.feed[i].check = '';
          }
        }
        console.log(this.feed);
      });
    },
    change(e, v) {
      if (e.indexOf(v) != -1) {
        e.splice(e.indexOf(v), 1);
      } else {
        e.push(v);
      }
    }
  },
  onLoad() {
    this.user();
  }
};
</script>

<style>
page {
  background: #f8f8f8;
}

.btn {
  margin: 78rpx 115rpx;
  height: 80rpx;
  background: linear-gradient(180deg, #1a9eff, #0fb8ff);
  border-radius: 40rpx;
  text-align: center;
  line-height: 80rpx;
  font-size: 32rpx;
  color: #fff;
}
</style>
